@extends('layouts.adminlayout')

@section('main')
<link rel="stylesheet" href="<?php echo asset('public/admin/upload_excel/css/jquery.fileupload.css'); ?>">
<section class="content">
    <div class="row">
        <div class="col-xs-12">
            <div class="box">
                <div class="box-header">
                    <h3 class="box-title">Văn Bằng <small>Cập nhật số văn băng (Khởi tạo bằng dữ liệu Excel)</small></h3>
                </div><!-- /.box-header -->
                <form action="" method="POST" role="form">
                    <div class="box-body">
                        <div class="form-group">
                            <a href="<?php echo asset('public/excel/DS_CAPBANG.xlsx'); ?>" class="btn btn-danger"><i class="fa fa-cloud-download"></i> Tải File Excel Mẫu DS_CAPBANG.xlsx</a>
                        </div>
                        <div class="form-group">
                            <span class="btn btn-success fileinput-button">
                                <i class="glyphicon glyphicon-plus"></i>
                                <span>Chọn Tệp Excel...</span>
                                <!-- The file input field used as target for the file upload widget -->
                                <input id="fileupload" type="file" name="files[]" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel,text/comma-separated-values, text/csv, application/csv" runat="server">
                            </span>
                        </div>

                        <br>
                        <br>
                        <!-- The global progress bar -->
                        <div id="progress" class="progress">
                            <div class="progress-bar progress-bar-success"></div>
                        </div>
                        <!-- The container for the uploaded files -->
                        <div id="files" class="files"></div>
                        <br>
                        <div class="form-group">
                            <button type="button" class="btn btn-warning" id='view' disabled><i class="fa fa-bug"></i> Kiểm Tra</button>
                            <button type="button" class="btn btn-info" id='save_data' disabled><i class="fa fa-align-justify"></i> Lưu Dữ Liệu</button>
                        </div>
                        <div class="form-group">
                            <div id="loading"></div>
                        </div>  
                    </div> 
                </form>
                <div id="overlay"></div>
                <div id="loading-img"></div>
            </div>

        </div>
</section>

<div class="modal fade" id="excel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <center><h3><b>Danh Sách Văn Bằng Cấp Cho Học Viên</b></h3></center>
            </div>
            <div class="modal-body" id='body_modal'>
                
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Đóng</button>
            </div>
        </div>
    </div>
</div>
<script src="<?php echo asset('public/admin/upload_excel/js/vendor/jquery.ui.widget.js'); ?>"></script>
<!-- The Iframe Transport is required for browsers without support for XHR file uploads -->
<script src="<?php echo asset('public/admin/upload_excel/js/jquery.iframe-transport.js'); ?>"></script>
<!-- The basic File Upload plugin -->
<script src="<?php echo asset('public/admin/upload_excel/js/jquery.fileupload.js'); ?>"></script>
<script type="text/javascript">
    /*jslint unparam: true */
    /*global window, $ */
    $(function() {
        var url = '<?php echo asset("public/admin/upload_excel/server/php/index.php"); ?>';
        $('#fileupload').fileupload({
            url: url,
            dataType: 'json',
            done: function(e, data) {
                $.each(data.result.files, function(index, file) {
                    $('#files').text(file.name).appendTo('#files');
                    $('#view').removeAttr('disabled');
                });
            },
            progressall: function(e, data) {
                var progress = parseInt(data.loaded / data.total * 100, 10);
                $('#progress .progress-bar').css(
                        'width',
                        progress + '%'
                        );
            }
        }).prop('disabled', !$.support.fileInput)
                .parent().addClass($.support.fileInput ? undefined : 'disabled');
    });

    $('#view').click(function(event) {
        $('#loading').html('<img src="<?php echo asset("public/images/loading46.gif"); ?>" width="5%" style="margin-left: 50%;">');
        $.ajax({
            type: "POST",
            url: '<?php echo asset("resultcerts/readexcel") ?>',               
            data: {namefile: document.getElementById("files").innerHTML},
            dataType: 'html',
            success: function(data){
              $('#body_modal').html(data);
                if (document.getElementById("flats-err").innerHTML == 0) {
                    $('#save_data').removeAttr('disabled');
                } else {
                    $('#save_data').attr('disabled', 'disabled');
                }
                ;
                $(".modal-dialog").animate({"width": "100%"}, 600, 'linear');
                $('#loading').html('');
                $('#excel').modal('show');
            }, 
            error: function(request, status, error){
              $('#loading').html('<center><div class="btn  btn-danger" disabled>Quá Trình Kiểm Tra Dữ Liệu Xảy Ra Lỗi Vui Lòng Kiểm Tra Cấu Trúc Tệp Excel!!!</div></center>');
                    console.log("error");
            }
        });

    });


 
    $('#save_data').click(function(event) {
        if (document.getElementById("flats-err").innerHTML == 0) {
            $('#overlay').addClass('overlay');
            $('#loading-img').addClass('loading-img');
            $('#save_data').attr('disabled', 'disabled');
            $.ajax({
                url: '<?php echo asset("resultcerts/storedsvanbang") ?>',
                type: 'post',
                dataType: 'html',
                data: {namefile: document.getElementById("files").innerHTML},
            })
                    .done(function(data) {
                        $('#loading').html('');
                        document.getElementById("files").innerHTML == '';
                        $('#save_data').removeAttr('disabled');
                        window.location = "<?php echo asset('resultcerts'); ?>";
                    })
                    .fail(function() {
                        $('#loading').html('<center><div class="btn  btn-danger" disabled>Quá Trình Kiểm Tra Dữ Liệu Xảy Ra Lỗi Vui Lòng Kiểm Tra Cấu Trúc Tệp Excel!!!</div></center>');
                    })
                    .always(function() {
                        console.log("complete");
                    });
        } else {
            $('#loading').html('');
            alert("File excel chứa dữ liệu lỗi!!!!");
        }
        ;


    });
</script>
@stop